<template>
     <view class="relative hg100" >
         <!-- 公共组件-每个页面必须引入 -->
         <public-module></public-module>
         <wlk-navbar :isShowTransparentTitle="false" title="分销排行榜" navbarType='5'></wlk-navbar>
         <view class="rank-content hg100 wlkflex justify-between pd30 align-start" v-if="!loading"  :style="{background:bgColor}">
             <view class="rank-font" >
                 <image class="br04" :src="images.rankFont"  mode="widthFix"/>
                 <view class="update mt15">最后更新于 {{ranks.time}}</view>
             </view>
             <view class="rank-icon">
                 <image class="wd100 br04" :src="images.carpet" mode="widthFix"/>
             </view>

         </view>
         <view class="rank-item">
             <view class="item-title wlkflex justify-between mt20">
                 <view class="ranking center">排名</view>
                 <view class="user">用户</view>
                 <view class="sales center">累计业绩</view>
             </view>
             <view class="rank-list wlkflex justify-between mt30" v-for="(rank,index) in ranks.data">
                 <view class="ranking center bold">
                     <block v-if="index+1==1">
                         <image :src="images.first" mode="widthFix"/>
                     </block>
                     <block v-else-if="index+1==2">
                         <image :src="images.second" mode="widthFix"/>
                     </block>
                     <block v-else-if="index+1==3">
                         <image :src="images.third" mode="widthFix"/>
                     </block>
                     <block v-else>
                         {{index+1}}
                     </block>
                 </view>
                 <view class="user wlkflex">
                     <u-avatar :src="rank.avatar"></u-avatar>
                     <view class="nickname ml15 u-line-1">{{rank.nickname}}</view>
                 </view>
                 <view class="sales center bold">{{rank.order_money}}</view>
             </view>
         </view>

         <view class="bg-icon">
             <image class="wd100 br04" :src="images.texture" mode="widthFix"/>
         </view>
     </view>
</template>

<script>
    import { toUrl,formatRichText,rgbaToRgb } from '@/wlkutils/tools';
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
        data() {
            return {
                ranks:{},
                loading:true,
                bgColor:'',
            };
        },
        computed: {
            ...mapGetters(['themeColor','uEmpty','images'])
        },
        onLoad() {
            this.bgColor = ' linear-gradient(to right,#FAC033,'+ uni.$u.colorToRgba(rgbaToRgb('#FAC033'), 0.65)+')';
            this.getData();
        },
        onShow() {

        },
        methods: {
            getData() {
                uni.$u.http.post('commission/getRank', {
                }).then(res => {
                    console.log(res)
                    this.ranks = res.data;
                    this.loading = false;
                    }).catch(res => {
                })
            },

        }
	}
</script>

<style lang="scss">
    page{
        background-color: white;
        .rank-content{
            height: 800rpx;
            /* #ifdef MP-WEIXIN */
            padding-top: 100rpx;
            /* #endif */
            .rank-font{
                width: 60%;
                padding-top: 200rpx;
                image{
                    width: 70%;
                }
                .update{
                    font-size: $font-sm;
                    color: rgba(255,255,255,.65);
                }
            }
            .rank-icon{
                padding-top:100rpx;
                width: 40%;
            }
        }
        .rank-item{
            position: absolute;
            width: 100%;
            height: 100%;
            /* #ifdef H5 */
            top: 400rpx;
            /* #endif */
            /* #ifdef MP-WEIXIN */
            top: 475rpx;
            /* #endif */
            background-color: white;
            border-radius: 25px 25px 0 0;
            padding: 40rpx 0 40rpx 0;
            .item-title{
                .ranking{
                    font-size: $font-base;
                    color: $uni-text-color-grey;
                    width: 20%;
                }
                .user{
                    font-size: $font-base;
                    color: $uni-text-color-grey;
                    width: 35%;
                }
                .sales{
                    font-size: $font-base;
                    color: $uni-text-color-grey;
                    width: 38%;
                }
            }
            .rank-list{
                .ranking{
                    font-size: $font-lt;
                    width: 20%;
                    color: $uni-text-color-grey;
                    image{
                        width: 55rpx;
                    }
                }
                .user{
                    font-size: $font-base;
                    width: 35%;
                    .nickname{
                        font-size: $font-base;
                    }
                }
                .sales{
                    font-size: $font-lt;
                    width: 38%;
                }
            }
        }

        .bg-icon{
            position: absolute;
            top: 0rpx;
            z-index: 99;
            width: 100%;
            height: 700rpx;
            opacity: .1;
            overflow: hidden;
        }
    }
</style>
